<% layout( 'admin_layout') -%>

    <div id="wrapper" class="wrapper">
        <nav class="navbar" style="background-color: #3BBFB4;">
            <div class="container-fluid">
                <div class="raw">
                    <div class="col-sm-6 col-xs-6">
                        <h3 style="margin-left:50px;color:#fff;">博文编辑</h3>
                    </div>
                    <div class="col-sm-6 col-xs-6">

                        <div class="box" style="float:right;margin-top: 10px;margin-right:5%;">
                            <div class="demo  btn btn-success">

                                <a class="rotateInDownLeft dialog demo33" style="color:#fff">立即提交</a>
                            </div>
                            <div id="HBox" style="display:none;border-radius:2px;">
                                <div>
                                    <h2></h2>
                                    <form class="form-horizontal" role="form">
                                        <div class="form-group">
                                            <label class="control-label col-sm-offset-1 col-sm-2" for="email">标签:</label>
                                            <div class="input-group col-sm-7" style="padding:0px;">
                                                <input id="tag" type="text" class="form-control" placeholder="please enter the tags">
                                                <span class="input-group-btn">
												<button id="searchbtn" class="btn btn-default" type="button"  onclick="add();">
													<span class="glyphicon glyphicon-plus"></span>
                                                </button>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-sm-3" for="pwd">标签列表:</label>
                                            <div id="tags" class="col-sm-7" style="border:thin #ccc solid;border-radius:2px;height:100px;">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-sm-offset-7 col-sm-3" style="padding:0px;">
                                                <button type="button" class="btn btn-default btn-md btn-block" onclick="createArt()">提交</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="raw"></div>
                        </div>
                        <!-- HBox end -->
                    </div>
                </div>
            </div>
        </nav>
    </div>

    <div class="container">
        <div class="raw">
            <div class="col-sm-6">
                <input id="title" class="form-control" placeholder="博文标题" type="text">

            </div>
            <div id="yulan" class="col-sm-6">
                <div style="height:34px;">
                    <span style="float:right;font-size:23px;">预览</span>
                    <span id="charnum" class="label label-default">0个字</span>
                </div>
            </div>
        </div>
        <div class="raw">
            <section class="col-sm-6 col-xs-12">
                <div>
                    <textarea id="text-input" class="col-sm-12 col-xs-12" oninput="this.editor.update()" rows="25" class="form-control"></textarea>
                </div>
            </section>
            <section class="col-sm-6 col-xs-0">
                <div id="preview" style="height:505px;overflow-y:auto;border:thin #ccc solid"></div>

            </section>

        </div>

    </div>


    <footer class="site-footer clearfix" style="margin-top:0px;">
        <section class="copyright">
            <a href="/" style="margin-bottom:0px;">
                <%=global.name%>
            </a> © 2016</section>
    </footer>

    <script>
        var tgs = new Array();
        var jquery = $.noConflict();
        var menu = new Menu;

        function Editor(input, preview) {
            this.update = function() {
                preview.innerHTML = markdown.toHTML(input.value);
            };
            input.editor = this;
            this.update();
        }
        var $ = function(id) {

            return document.getElementById(id);
        };
        new Editor($("text-input"), $("preview"));



        jquery(function() {
            var el = jquery('.dialog');

            el.hDialog({
                width: 400
            }); //自定义弹框宽度；
            el.hDialog({
                height: 600
            }); //自定义弹框高度；
            el.hDialog({
                box: '#HBox'
            });

            //rotateOutDownLeft关闭效果


            jquery("#text-input").bind("input propertychange", function() {

                jquery('#charnum').text(jquery("#text-input").val().length + '个字');
            });
        });

        function add() {
            if (jquery('#tag').val() != '') {
                var pd = 1;
                for (var i = 0; i < tgs.length; i++) {
                    if (jquery('#tag').val() == tgs[i]) {
                        jquery('#tag').val('');
                        pd = 0;
                    }

                }
                if (pd == 1) {
                    tgs.push(jquery('#tag').val());
                    var tag = "<span class='label label-info' style='display:inline-block;margin-right:5px;'>" + jquery('#tag').val() + "<span class='glyphicon glyphicon-remove' onclick='jquery(this).parent().remove();rmtgs(jquery(this).parent())'></span></span>";
                    jquery('#tags').append(tag);
                    jquery('#tag').val('');
                }

            }
        }

        function rmtgs(tag) {
            for (var i = 0; i < tgs.length; i++) {
                if (tgs[i] == tag.text()) {
                    tgs.splice(i - 1, 1);
                }


            }
        }

        function createArt() {

            var title = jquery('#title').val();
            var markdown = jquery("#text-input").val();
            var html = jquery('#preview').html();

            if (title != '' && markdown != '') {
                jquery.ajax({
                    type: "POST",
                    cache: false,
                    url: "/api/article/create",
                    data: {
                        title: title,
                        markdown: markdown,
                        html: html,
                        tags: JSON.stringify(tgs)
                    },
                    success: function(msg) {

                        if (msg.status != 0) {
                            alert(msg.error);
                        } else {
                            window.location.href = '/admin/artlist';
                        }


                    }
                });
            }
        }
    </script>